<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        button {
            background-image: linear-gradient(#82e2c2 20%, rgb(236, 148, 148) 60%, #9fc3ec 90%);
            background-size: auto 200%;
            background-position: 0 100%;
            transition: background-position 0.5s;
            width: 200px;
            height: 40px;
            font-size: 20px;
        }

        button:hover {
            background-position: 0 0;
        }

        .box-shadow {
            background-color: #FF8020;
            width: 160px;
            height: 90px;
            margin-top: -45px;
            margin-left: -80px;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        .box-shadow:after {
            content: "";
            width: 150px;
            height: 1px;
            margin-top: 88px;
            margin-left: -75px;
            display: block;
            position: absolute;
            left: 50%;
            z-index: -1;
            -webkit-box-shadow: 0px 0px 8px 2px #000000;
            -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
        }
        /* 包裹长文本 */

        .pre {
            width: 400px;
            border: 1px solid #ccc;
            white-space: pre-line;
            word-wrap: break-word;
        }
        /* 强制出现垂直滚动条 */

        html {
            height: 101%
        }
        /* CSS动画实现省略号动画 */

        .loading:after {
            overflow: hidden;
            display: inline-block;
            vertical-align: bottom;
            animation: ellipsis 2s infinite;
            content: "\2026";
            /* ascii code for the ellipsis character */
        }

        @keyframes ellipsis {
            from {
                width: 2px;
            }
            to {
                width: 15px;
            }
        }

        p {
            position: relative;
            z-index: 1;
            padding: 10px;
            margin: 10px;
            font-size: 21px;
            line-height: 1.3em;
            color: #fff;
            background: #78cfa4;
            box-shadow: 0 0 0 4px #99c986, 2px 1px 6px 4px rgba(10, 10, 0, .5);
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        p:before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 3px;
            bottom: 3px;
            left: 3px;
            right: 3px;
            border: 2px dashed #fff;
        }

        p a {
            color: #fff;
            text-decoration: none;
        }

        p a:hover,
        p a:focus,
        p a:active {
            text-decoration: underline;
        }

        ul {
            margin: 0.75em 0;
            padding: 0 1em;
            list-style: none;
        }

        li:before {
            content: "";
            border-color: transparent #111;
            border-style: solid;
            border-width: 0.35em 0 0.35em 0.45em;
            display: block;
            height: 0;
            width: 0;
            left: -1em;
            top: 0.9em;
            position: relative;
        }
        /* 来回运动的小球 */

        .loadding1 {
            animation: poolball_l 2s .8s linear infinite;
        }

        .loadding2 {
            animation: poolball_r 2s 1.6s linear infinite;
        }

        @keyframes poolball_l {
            25% {
                transform: translateX(-160%);
            }
            50% {
                transform: translateX(0);
            }
        }

        @keyframes poolball_r {
            25% {
                transform: translateX(160%);
            }
            50% {
                transform: translateX(0);
            }
        }

        .lo1 span {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background: rgb(142, 223, 169);
        }

        input[type=text],
        textarea {
            -webkit-transition: all 0.30s ease-in-out;
            -moz-transition: all 0.30s ease-in-out;
            -ms-transition: all 0.30s ease-in-out;
            -o-transition: all 0.30s ease-in-out;
            outline: none;
            padding: 3px 0px 3px 3px;
            margin: 5px 1px 3px 0px;
            border: 1px solid #ddd;
            margin-left: 100px;
        }

        input[type=text]:focus,
        textarea:focus {
            box-shadow: 0 0 5px rgba(81, 203, 238, 1);
            padding: 3px 0px 3px 3px;
            margin: 5px 1px 3px 0px;
            border: 1px solid rgba(81, 203, 238, 1);
        }

        body {
            background-image: url();
            background-color: #0094d0;
        }
    </style>
</head>

<body>
    <div style="padding: 40px;text-align: center;display: flex;justify-content: flex-start;" class="lo1">
        <span class="loadding1"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="loadding2"></span>
        <br>
        <input type="text" name="ipt" id="" placeholder="请输入">

    </div>
    <p>
        <a href="#">回到首页</a>
    </p>
    <p>
        <button>点击搜索</button>
    </p>
    <div class="box-shadow"></div>
    <div class="pre">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta iste, ipsa deleniti modi labore eum hic esse, expedita
        cum corrupti ipsum doloribus omnis totam, soluta quasi inventore dignissimos? Suscipit magnam deserunt aut corrupti
        modi asperiores. Delectus est accusantium laborum id veritatis quo et qui quaerat necessitatibus! Laudantium deserunt
        saepe itaque quasi ut autem temporibus cupiditate. Corrupti aliquid veritatis quae neque quisquam sequi quaerat magnam,
        ex asperiores amet cupiditate distinctio mollitia tempora omnis vero vitae deleniti! Doloremque, quas saepe rem minima
        ducimus officia nostrum temporibus quasi unde maxime laudantium nemo. Accusamus necessitatibus nesciunt facilis id
        earum reiciendis beatae exercitationem harum reprehenderit?</div>
    <div class="loading"></div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script type="text/javascript" src="jquery.js"></script>
    <form id="choose-fruit">
            <input type="radio" name="fruit" value="apple" id="ipt1">
        <label for="ipt1">
            
            <span>apple</span>
        </label>
       
        <label>
            <input type="radio" name="fruit" value="pear">
            pear
        </label>

        <script>
            {
                let $form = $("#choose-fruit");
                $form.find("label").on("click", function (event) {
                    console.log(event.target);
                });
            }
        </script>
    </form>
    <script type="text/javascript">
    </script>
</body>

</html>